<template>
  <div>
    <component :is="selectedComponent"></component>
    <input type="text" v-model="input" @change="changeText" />
  </div>
</template>

<script>
import ComponentA from '../components/ComponentA.vue'
import ComponentB from '../components/ComponentB.vue'
export default {
  data() {
    return {
      selectedComponent: 'ComponentA',
      input: '',
    }
  },
  components: {
    ComponentA,
    ComponentB,
  },
  methods: {
    changeText() {
      console.log(this.input)
      if (this.input.toUpperCase() == 'A') {
        this.selectedComponent = 'ComponentA'
      }
      if (this.input.toUpperCase() == 'B') {
        this.selectedComponent = 'ComponentB'
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
